<!-- 蓝色登录页面2 -->
<template>
	
	<view>
	<u-toast ref="uToast" />
		<view class="img-a">	
			<view class="t-b">
				您好，
				<br />
				欢迎登录一点
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">账号</text>
						<input type="text" name="phone" placeholder="请输入您的账号" maxlength="11" v-model="loginForm.username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="password" maxlength="18" placeholder="请输入您的密码" v-model="loginForm.password" />
					</view>
					<view class="wrap">
						<text class="txt">验证码</text>
						<u-row gutter="16">
							<u-col span="7">
								<input  type="password" name="password" maxlength="5" placeholder="请输入您的验证码" v-model="loginForm.code" />
							</u-col>
							<u-col span="5">
								<u-image @click="getCaptcha()"  height='60rpx' :src="loginForm.image"></u-image>
							</u-col>
						</u-row>	
					</view>
					<button @click="login()">登 录</button>
					<view class="reg" @tap="reg()">注 册</view>
				</form>
				<view class="t-f"><text>—————— 其他账号登录 ——————</text></view>
				<view class="loginType">
					<view class="phone item" @tap="phoneLogin()" >
						<view class="icon"><u-icon size="70" name="phone-fill" color="rgb(17,183,233)"></u-icon></view>
						手机
					</view>
					<view class="wechat item">
						<view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
						微信
					</view>
					<view class="QQ item">
						<view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
						QQ
					</view>
				</view>
				<view class="hint">
					登录代表同意
					<text class="link">一点商城(OCM) 用户协议、隐私政策，</text>
					并使用您已经同意授权的信息。
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {

	data() {
		return {
			loginForm: {
			  //租户ID
			  tenantId: "809501",
			  //用户名
			  username: "admin",
			  //密码
			  password: "admin",
			  //账户类型
			  type: "account",
			  //验证码的值
			  code: "",
			  //验证码的索引
			  key: "",
			  //预加载白色背景
			  image: "",
			},
		
			
		};
	},
	onLoad() {},
	onShow(){
		this.getCaptcha()
	},
	methods: {
		//获取验证码
		getCaptcha(){
			this.$u.api.getCaptcha().then(res=>{
				this.loginForm.key = res.key;
				this.loginForm.image = res.image;
			})
		},
		//当前登录按钮操作
		async login() {
			var that = this;
			if (!that.loginForm.username) {
				uni.showToast({ title: '请输入您的账号', icon: 'none' });
				return;
			}
			if (!that.loginForm.password) {
				uni.showToast({ title: '请输入您的密码', icon: 'none' });
				return;
			}
			if (!that.loginForm.code) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			
			let res = await this.$u.api.loginByUsername(this.loginForm);
	
			uni.removeStorageSync('token')
			uni.setStorageSync('token','bearer '+res.accessToken);
			uni.removeStorageSync('user')
			uni.setStorageSync('user',res);
			this.$refs.uToast.show({
				title: '登录成功',
					// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
				type: 'success', 
					// 如果不需要图标，请设置为false
				icon: false,
				duration:500,
				back:true,
			});
		},
		//注册按钮点击
		reg() {
			uni.navigateTo({
				url:'./register'
			})
		},
		//等三方微信登录
		wxLogin() {
			
			uni.showToast({ title: '微信登录', icon: 'none' });
			
		},
		phoneLogin(){
			uni.showToast({ title: '微信登录', icon: 'none' });
			uni.navigateTo({
				url: './phoneLogin'
			});

		},
		//第三方支付宝登录
		zfbLogin() {
			uni.showToast({ title: '支付宝登录', icon: 'none' });
		}
	}
};
</script>
<style lang="scss">
@import './login.scss';

.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url("https://i.postimg.cc/7h4bkzX7/head.png");
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 33.33%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
